Introduction to Tailwind CSS
Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes. These classes enable rapid styling without writing custom CSS, promoting consistency and scalability. Tailwind’s approach shifts focus from traditional CSS components to functional classes, empowering developers to efficiently build responsive and visually appealing interfaces with minimal effort....
read more
How to Change Style of Scrollbar using Tailwind CSS ?
Tailwind does not provide any built-in utilities for styling scrollbars, but you can customize the scrollbar appearance using CSS. To change the scrollbar’s appearance using Tailwind, we need to use the scrollbar-* classes. These classes are used to customize various aspects of the scrollbar, such as its width, color, and behavior....
read more
Tailwind CSS Container
Tailwind CSS provides a container class to constrain the width of content. It centers the content horizontally and sets maximum widths at different breakpoints, ensuring responsive design. By default, it limits content width to prevent it from stretching too wide on larger screens....
read more
How to use calc() in Tailwind CSS ?
The calc( ) is a built-in function in CSS that enables you to carry out mathematical computations. You can use the calc() function in Tailwind CSS to dynamically determine values for different CSS properties. You can use the “calc()” statement just by wrapping it inside square brackets. In this article, we will see the usage of the calc() function in Tailwind CSS....
read more
How to align two elements left and right using tailwind CSS ?
In this article, we will learn how to align two HTML elements on the left and right sides of a document using Tailwind CSS....
read more
How to set a background color to full page using Tailwind CSS ?
In this article, we will learn to apply background color using Tailwind CSS....
read more
How to fill up the rest of screen height using Tailwind CSS ?
In this article, we will learn how to fill up the rest of the screen height using Tailwind CSS....
read more
Tailwind CSS
Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS....
read more
Tailwind CSS vs Bootstrap
Tailwind CSS was initially developed by Adam Wathan, and the first version was released back on the 1st of November, 2017. Tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly and efficiently. It is an inline styling used to achieve a sleek interface without writing code for your own CSS. Tailwind CSS offers customizability and flexibility to transform the appearance and feel of the elements. Tailwind CSS is not the first utility-first CSS library, but it is one of the most popular and light ones. It is a highly customizable, low-level CSS framework, and it provides all the building blocks the developer needs to build a fantastic interface for any website....
read more
How to align form elements to center using Tailwind CSS ?
You can easily align form elements in the center using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS....
read more
How to resize SVG icon using Tailwind CSS ?
SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily resize the SVG icon using Tailwind....
read more
Tailwind CSS Table Layout
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can set the display of the layout of the table. In CSS, we do that by using the CSS table-layout property....
read more